<template>
  <div class="class-manage-div">
      <el-row class="header_row">
        <!-- <div class="">

          <router-link to="/class/show/" class="route-link">
          <i class="el-icon-back"></i> 返回 / </router-link>
        </div> -->
        <el-tooltip class="item" effect="dark" content="返回" placement="top">
            <div class="course-back-btn">
              <router-link to="/class/show" class="route-link">
              <i class="el-icon-back"></i></router-link>
            </div>
       </el-tooltip>
      
        <!-- <div class="class_manage_header">

          <div class="class_header_item">
            当前的班级： <el-tag  size="small" type="info">
              <span style="color:black">{{classId}}-{{className}}</span></el-tag>
          </div>

          <div class="class_header_item">

            班级人数：
            <el-tag  size="small" type="info">
            <span style="color:black">{{classNumber}}</span></el-tag>
          </div>

          <div class="class_header_item">
            班级URL：<el-tag  size="small" type="info">
              <span style="color:black">{{host + '/api/class/' + '1001'}}</span>
              </el-tag>
          </div>


        </div>
         -->

      </el-row>
      

      <el-row class="class_manage_header_row" style="margin-top:2%">
        <div class="class_manage_header_left">

          <div style="width:250px;margin-right:2%;">
            <el-input v-model="searchStuName" placeholder="请输入要添加的学生姓名"></el-input>
          </div>

          <div>
            <el-button type="primary" plain @click="searchStuInfo">点击搜索并添加学生</el-button>
          </div>
        </div>

        <div class="del-stus-btn">
          <el-button type="danger" @click="handleDeleteBatch" plain >批量删除</el-button>
        </div>
      </el-row>

      <el-tag style="height:30px" type="info">
          tips：如若您需手动添加用户，请输入学生姓名后点击添加；
          如果不想手动添加用户，可将班级URL发送给学生
      </el-tag>

      <el-dialog
        v-loading="false"
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>搜索的学生信息如下：</span>
        <div v-show="haveTheStu">
          <div>
          <span class="info_label">姓名：</span> {{stuInfo.stuName}}

          </div>
          <div>
          <span class="info_label">学号：</span> {{stuInfo.stuNumber}}

          </div>
          <div>
          <span class="info_label">用户名：</span> {{stuInfo.stuUsername}}

          </div>
          <div>
          <span class="info_label">性别：</span> {{stuInfo.stuGender}}

          </div>

        </div>
        <div v-show="!haveTheStu">
          <span class="info_label">学生不存在</span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="bindStuAndClass">添 加</el-button>
        </span>
      </el-dialog>

      <div class="class_stus">
        学生名单：


          <el-table
          ref="multipleTable"
          :data="stuData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            label="学号"
            width="130">
            <template slot-scope="scope">
              <!-- <el-tag size="medium" type="success"> -->
                {{ scope.row.stuNumber}}
              <!-- </el-tag> -->
                </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            width="120">
             <template slot-scope="scope">
               <!-- <el-tag size="medium" type="success"> -->
                 {{ scope.row.stuName }}
                 <!-- </el-tag> -->
             </template>
          </el-table-column>
          <el-table-column
            prop="stuEmail"
            label="邮箱"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="stuPhone"
            show-overflow-tooltip
            label="手机号">
          </el-table-column>

        <el-table-column
        align="right"
        label="可选操作">

        <template slot-scope="scope">
            <el-button
            size="mini"
            circle plain
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)">
            </el-button>
        </template>
        </el-table-column>
        </el-table>
      </div>
      


  </div>
</template>

<script>
import * as API from '../../api/class/index'
import * as USERAPI from '../../api/user/index'
  export default {
    data() {
      return {
        haveTheStu: false,
        host: "",
        classId: this.$route.params.classId,
        classUrl: this.$route.params.classUrl,
        classNumber: 50,
        stuData: [],
        multipleSelection: [],
        showAddStuInfo: false,
        searchStuName:"",
        dialogVisible: false,
        stuInfo:{
          stuId:'',
          stuName:'',
          stuGender:'',
          stuUsername:'',
          stuNumber:''
        }
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, row) {

        this.$confirm('此操作将删除该学生, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let stuId = row.stuId
          USERAPI.delStuById(stuId).then(res => {
            if(res.code == 200) {
              this.getClassInfo(this.classId)
              this.$message({
                message: '删除成功',
                type: 'success'
              });

            }else {
              this.$message.error(res.data.error);
            }
          }).catch(err => {
            this.$message.error('网络好像有问题！');
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

      },
      handleDeleteBatch() {
        

        this.$confirm('此操作将批量删除学生, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let stuIds = []
          this.multipleSelection.forEach(stuInfo => {
            stuIds.push(stuInfo.stuId)
          });

          USERAPI.delStuBatch(stuIds).then(res => {
            if(res.code == 200) {
              this.getClassInfo(this.classId)
              this.$message({
                message: '删除成功',
                type: 'success'
              });

            }else {
              this.$message.error(res.data.error);
            }
          }).catch(err => {
            this.$message.error('网络好像有问题！');
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      searchStuInfo() {
        USERAPI.getOneUserByName(this.searchStuName).then(res => {
          if(res.data.stu == null) {
              this.haveTheStu = false
          }else {
            this.haveTheStu = true
            this.stuInfo = res.data.stu
          }
        })
        this.dialogVisible = true
      },
      handleClose() {
        this.dialogVisible = false
      },
      getClassInfo(classId) {
        API.getClassInfo(classId).then(res => {
          // console.log(res.data)
          this.stuData = res.data.classInfo.stuData
        })
      },
      bindStuAndClass() {
        this.dialogVisible = false
        if(this.stuInfo.stuId == undefined || this.stuInfo.stuId == null) {
          this.$message.error('没有该学生！');
        }

        API.bindClass(this.classUrl, this.stuInfo.stuId).then(res => {
          if(res.code == 200) {
              this.getClassInfo(this.classId)
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.getClassInfo(this.classId)

            }else {
              this.$message.error(res.data.error);
            }
        })
        
      }

    },
    mounted() {
      if(this.$route.params.classId === undefined) {
        this.$router.push({
          path: "/class/show"
        })
      }else {
        this.getClassInfo(this.$route.params.classId)
      }
      
    }
  }
</script>

<style>
.class-manage-div {
  margin: 2%;
}
.class_stus {
  margin-top: 1%;
}

.route-link {
  font-size: 15px;
  color: black;
  text-decoration: none;
  width: 80px;
}

.route-link > i {
  width:100%;
  height:100%
}

.route-link:hover {
  color: rgb(254, 208, 73);
}

.header_row {
  display: flex;
  width: 100%;

  margin-bottom: 1%;
}

.class_manage_header {
  width: 100%;
  height: 30px;
  /* padding-left: 2%; */
  font-size: 15px;

  display: flex;
  justify-content: flex-start;
}

.class_manage_header_row {
  display: flex;
  margin-bottom: 1%;
  justify-content: space-between;
}

.class_manage_header_left {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  /* margin-left: -10%;  */
  /* margin-right: 35%; */
}

.del-stus-btn {
  margin-left: 2%;
  justify-self: flex-end;
}

.class_header_item {
  color: #99a9bf;
  margin-left: 1%;

}

.info_label {
  color: #99a9bf;
}

.class_header_item_info {
  line-height: 25px;
  vertical-align: bottom;
}

</style>